<template>
  <dialog-form
    name="产品"
    :queryBean="queryProduct"
    :createBean="createProduct"
    :updateBean="updateProduct"
    :deleteBean="deleteProduct"
    :beanId="beanId"
    :beanIds="beanIds"
    :focus="focus"
    :initValues="(): any => ({orgId:org?.id, gender: 'm', roleIds: [] })"
    :toValues="(bean: any) => ({ ...bean })"
    :disableDelete="(bean: any) => bean.id <= 1"
    :disableEdit="(bean) => currentUser.rank > bean.rank"
    perms="user"
    v-model:values="values"
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    @finished="$emit('finished')"
    large
  >
    <template #header-status="{ isEdit }">
      <template v-if="isEdit">
        <el-tag v-if="values.status === 0" type="success" class="ml-2">{{ $t(`user.status.${values.status}`) }}</el-tag>
        <el-tag v-else-if="values.status === 1" type="info" class="ml-2">{{ $t(`user.status.${values.status}`) }}</el-tag>
        <el-tag v-else-if="values.status === 2" type="warning" class="ml-2">{{ $t(`user.status.${values.status}`) }}</el-tag>
        <el-tag v-else-if="values.status === 3" type="danger" class="ml-2">{{ $t(`user.status.${values.status}`) }}</el-tag>
        <el-tag v-else type="danger" class="ml-2">{{ values.status }}</el-tag>
      </template>
    </template>
    <template #default="{ bean, isEdit }">
      <el-row>
        <el-col :span="12">
          <el-form-item
            prop="productName"
            label="产品名称"
            :rules="[
              { required: true, message: () => $t('v.required') }
            ]"
          >
            <el-input v-model="values.productName" ref="focus" maxlength="50"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="status" label="显示状态" :rules="[{ required: true, message: () => $t('v.required') }]">
            <el-radio-group v-model="values.status">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="desc" label="产品描述">
            <el-input v-model="values.desc" type="textarea" :rows="3" maxlength="2000"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="isEdit">
          <el-form-item prop="createDate" :label="$t('user.created')">
            <template #label><label-tip message="user.created" /></template>
            <el-date-picker v-model="values.createDate" type="datetime" disabled></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
    </template>
  </dialog-form>
</template>

<script lang="ts">
export default { name: 'ProductForm' };
</script>

<script setup lang="ts">
import { onMounted, ref, toRefs, watch } from 'vue';
import { currentUser } from '@/store/useCurrentUser';
import { securitySettings } from '@/store/useConfig';
import { queryUser, createUser, updateUser, deleteUser, usernameExist, emailExist, mobileExist, queryGroupList, queryOrgList } from '@/api/user';
import { queryProduct, createProduct, updateProduct } from '@/api/product'
import { toTree } from '@/utils/tree';
import { passwordPattern } from '@/utils/common';
import DialogForm from '@/components/DialogForm.vue';
import LabelTip from '@/components/LabelTip.vue';

const props = defineProps({
  modelValue: { type: Boolean, required: true },
  beanId: { required: true },
  beanIds: { type: Array, required: true },
  org: null,
  showGlobalData: { type: Boolean, required: true },
});
const { showGlobalData, modelValue: visible } = toRefs(props);
defineEmits({ 'update:modelValue': null, finished: null });

const focus = ref<any>();
const values = ref<any>({});
const groupList = ref<any[]>([]);
const orgList = ref<any[]>([]);

const fetchGroupList = async () => {
  groupList.value = await queryGroupList({ type: 2 });
};
const fetchOrgList = async () => {
  orgList.value = toTree(await queryOrgList({ current: !showGlobalData.value }));
};

onMounted(() => {
  fetchGroupList();
});

watch(visible, () => {
  if (visible.value) {
    fetchOrgList();
  }
});
</script>
